<template>
  <el-form
      ref="clueRemarkRefForm"
      :model="clueRemark"
      label-width="110px"
      style="max-width: 95%;">

    <el-form-item label="负责人">
      <div class="desc">{{clueDetail?.ownerDO?.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="所属活动">
      <div class="desc">{{clueDetail?.activityDO?.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="姓名">
      <div class="desc">{{clueDetail.full_name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="称呼">
      <div class="desc">{{clueDetail?.appellationDO?.type_value}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="手机">
      <div class="desc">{{clueDetail.phone}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="微信">
      <div class="desc">{{clueDetail.weixin}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="QQ">
      <div class="desc">{{clueDetail.qq}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="邮箱">
      <div class="desc">{{clueDetail.email}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="年龄">
      <div class="desc">{{clueDetail.age}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="职业">
      <div class="desc">{{clueDetail.job}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="年收入">
      <div class="desc">{{clueDetail.year_income}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="住址">
      <div class="desc">{{clueDetail.address}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="贷款">
      <div class="desc">{{clueDetail?.needLoanDO?.type_value}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="意向状态">
      <div class="desc">{{clueDetail?.intentionStateDO?.type_value}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="意向产品">
      <div class="desc">{{clueDetail?.intentionProductDO?.name}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索状态">
      <div class="desc">{{clueDetail?.stateDO?.type_value}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索来源">
      <div class="desc">{{clueDetail?.sourceDO?.type_value}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="线索描述">
      <div class="desc">{{clueDetail.description}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="下次联系时间">
      <div class="desc">{{clueDetail.next_contact_time}}&nbsp;</div>
    </el-form-item>

    <el-form-item label="填写跟踪记录" prop="note_content">
      <el-input
          v-model="clueRemark.note_content"
          :rows="8"
          type="textarea"/>
    </el-form-item>
    <el-form-item label="跟踪方式" prop="note_way">
      <el-select
          v-model="clueRemark.note_way"
          placeholder="请选择跟踪方式"
          style="width: 100%"
          @click="loadDicValue('noteWay')"
          clearable> <!-- 数据库里面的列中数据是noteWay 还有 clueState等其他驼峰数据-->
        <el-option
            v-for="item in noteWayOptions"
            :key="item.id"
            :label="item.type_value"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="clueRemarkSubmit">提 交</el-button>
      <el-button type="success" @click="convertCustomer" v-if="clueDetail.state !== -1">转换客户</el-button>
      <el-button type="success" plain @click="goBack(router)">返 回</el-button>
    </el-form-item>

  </el-form>

  <el-table
      :data="clueRemarkList"
      style="width: 100%">
    <el-table-column type="index" label="序号" width="60"/>
    <el-table-column prop="noteWayDO.type_value" label="跟踪方式"/>
    <el-table-column prop="note_content" label="跟踪内容"/>
    <el-table-column property="create_time" label="跟踪时间"/>
    <el-table-column property="createByDO.name" label="跟踪人"/>
    <el-table-column property="edit_time" label="编辑时间"/>
    <el-table-column property="editByDO.name" label="编辑人"/>
    <el-table-column label="操作">
      <template #default="scope">
        <a href="javascript:" @click="edit(scope.row.id)">编辑</a>
        &nbsp;
        <a href="javascript:" @click="del(scope.row.id)">删除</a>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      v-model:current-page="currentPage"
  />

  <!--线索转换为客户的弹窗（对话框）-->
  <el-dialog v-model="convertCustomerDialogVisible" title="线索转换客户" width="55%" center>
    <el-form ref="convertCustomerRefForm" :model="customerQuery" label-width="110px" :rules="convertCustomerRules">
      <el-form-item label="意向产品" prop="product">
        <el-select v-model="customerQuery.product" placeholder="请选择" style="width: 100%;" @click="loadDicValue('product')">
          <el-option
              v-for="item in productOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="客户描述" prop="description">
        <el-input
            v-model="customerQuery.description"
            :rows="8"
            type="textarea"
            placeholder="请输入客户描述"/>
      </el-form-item>
      <el-form-item label="下次跟踪时间" prop="next_contact_time">
        <el-date-picker
            v-model="customerQuery.next_contact_time"
            type="datetime"
            style="width: 100%;"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择下次跟踪时间"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="convertCustomerDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="convertCustomerSubmit">转 换</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import {goBack, messageTip} from "../util/util.js";
import {inject, onMounted, reactive, ref, watch} from "vue";
import router from "../router/router.js";
import {useRoute} from "vue-router";
import {doGet, doPost} from "../http/httpRequest.js";

let route = useRoute();
//转换用户弹框
let convertCustomerDialogVisible = ref(false);
let convertCustomerRefForm = ref();
let customerQuery = reactive({})
//转换用户规则
let convertCustomerRules = {
  product : [
    { required: true, message: '请选择意向产品', trigger: ['blur', 'change'] }
  ],
      description : [
    { required: true, message: '客户描述不能为空', trigger: 'blur' },
    { min: 5, max: 255, message: '客户描述长度为5-255个字符', trigger: 'blur' }
  ],
      next_contact_time : [
    { required: true, message: '请选择下次联系时间', trigger: 'blur' }
  ]
}

//页数大小
let pageSize = ref();
//数据总数
let total = ref();
//当前是第几页
let currentPage = ref();

let clueRemarkRefForm = ref();
let clueRemark = reactive({
  note_content : '',
  note_way : ''
});
let clueDetail = ref([{}]);

let noteWayOptions = ref([{}]);
let productOptions = ref([{}]);

onMounted(()=>{
  loadClueDetail(route.params.id);
  loadClueRemarkList(1);
})
let clueRemarkList = ref([{}]);

watch(currentPage,(newCurrentPage) => {
  loadClueRemarkList(newCurrentPage);
})
const reload = inject("reload");
//获取当前线索人的信息
const loadClueDetail = (id) => {
  doGet("/api/clue/"+id,{}).then((resp)=>{
    console.log(resp);
    if(resp.data.code === 200){
      clueDetail.value = resp.data.data;
    }
  })
}
//获取跟踪方式列表
const loadDicValue = (type_code) => {
  doGet("/api/dicValue/" + type_code,{}).then((resp)=>{
    console.log(resp);
    if(resp.data.code === 200){
      if(type_code === 'noteWay'){
        noteWayOptions.value = resp.data.data;
      }else if(type_code === 'product'){
        productOptions.value = resp.data.data;
      }
    }
  })
}
//提交跟踪记录与跟踪方式
const clueRemarkSubmit = () => {
  let formData = new FormData;
  formData.append("clue_id",clueDetail.value.id);
  formData.append("note_way",clueRemark.note_way);
  formData.append("note_content",clueRemark.note_content);
  doPost("/api/clue/remark", formData).then((resp)=>{
    console.log(resp);
    if (resp.data.code === 200) {
      messageTip("提交成功", "success");
      reload();
    } else {
      messageTip("提交失败", "error");
    }
  })
}
//分页获取当前线索人被追踪的记录
const loadClueRemarkList = (current) => {
  doGet("/api/clue/remark",{
    current : current,
    clue_id : route.params.id
  }).then((resp)=>{
    console.log(resp);
    if (resp.data.code === 200) {
      clueRemarkList.value = resp.data.data.records;
      pageSize.value = resp.data.data.size;
      total.value = resp.data.data.total;
    }
  })
}
//转换用户
const convertCustomer = () => {
  convertCustomerDialogVisible.value = true;
}
//进行转换
const convertCustomerSubmit = () => {
  convertCustomerRefForm.value.validate( (isValid) => {
    if (isValid) {
      let formData = new FormData;
      formData.append("clue_id",route.params.id);
      formData.append("product",customerQuery.product);
      formData.append("description",customerQuery.description);
      formData.append("next_contact_time",customerQuery.next_contact_time);
      doPost("/api/clue/customer", formData).then(resp => {
        if (resp.data.code === 200) {
          messageTip("转换成功", "success");
          //刷新
          reload();
        } else {
          messageTip("转换失败", "error");
        }
      })
    }
  })
}
</script>

<style scoped>

</style>